<template lang="pug">
.current-list(@mouseenter="onEnter" @mouseleave="onLeave")
  .l
    h1
      | 制作中
      button(@click="$refs.audio.muted = false") 按钮
    el-card(class="box-card" v-for='d in paid_list')
      div(slot="header" class="clearfix")
        span
          p 订单号：{{d.order_number}}
          p {{d.meal_type}} - {{d.meal_time}}
          p 手机号：{{d.phone}}
        el-button(type="primary" style='padding: 8px 20px;height: 36px;border-radius: 20px;float: right;margin-top:-30px;' @click="completion(d.id,d.order_number)" v-p="['sale.order.status']")
          i.el-icon-dish
          | 确定完成
      div(class="text item" v-for='t in d.products')
        | {{t.name}} x {{t.count}}
  .r
    h1 请取餐
    el-card(class="box-card" v-for='d in meal_list')
      div(slot="header" class="clearfix")
        span
          p 订单号：{{d.order_number}}
          p {{d.meal_type}} - {{d.meal_time}}
          p 手机号：{{d.phone}}
        el-button(type="primary" @click="meal(d.id,d.order_number)" v-p="['sale.order.status']" style='padding: 8px 20px;height: 36px;border-radius: 20px;float: right;margin-top:-30px;')
          i.el-icon-shopping-cart-full
          |确定取餐
      div(class="text item" v-for='t in d.products')
        | {{t.name}} x {{t.count}}
  audio(v-show='false' src='../../assets/img/1.mp3' ref="audio" muted)
</template>
<script>
export default {
  data() {
    return {
      paid_list:[], //已付款
      meal_list:[],  //待取餐
      timeId:null,
      isRespons:true, // 接口响应是否已返回，已返回true
      isEnter:false
    }
  },
  created() {
    this.data()
  },
  mounted() {
    this.timeId = setInterval(() => {
      this.data()
    },5000)
    document.addEventListener('visibilitychange',this.onTabChange)
  },
  beforeDestroy() {
    if(this.timeId) {
      clearInterval(this.timeId)
      this.timeId = null
    }
    this.timeId && clearInterval(this.timeId)
    document.removeEventListener('visibilitychange',this.onTabChange)
  },
  methods: {
    onTabChange() {
      if(document.visibilityState === 'visible') {
        // 启动定时
        if(this.timeId) return
        this.timeId = setInterval(() => {
          this.data()
        },5000)
      }else {
        // 停掉定时
        if(this.timeId) {
          clearInterval(this.timeId)
          this.timeId = null
        }
      }
    },
    data(force) {
      // 如果force是true的话，就不return;
      if(force) {
        // 空
      }else {
        // 一次请求已经发出，响应还没有回来，定时器到了5秒，又发出一次请求
        if(!this.isRespons || this.isEnter) return;
      }
      this.isRespons = false;
      this.axios.get('/order/current').then(({data}) => {
        this.isRespons = true;
        if(this.isEnter && !force) return; //一次请求发出，鼠标移动到操作区，停掉定时器，然后请求的响应回来了，视图刷新
        console.log(data);
        if(
          data.data.paid_list.some(
            i=>!this.paid_list.find(
              j =>j.id === i.id
            )
          )
        ) this.$refs.audio.play()
        if(!data.errcode) {
          this.paid_list = data.data.paid_list
          this.meal_list = data.data.meal_list
        }
      })
    },
    completion(id,number) {
      this.axios.post('/order/status',{id,status:3}).then(({data}) => {
        if(!data.errcode) {
          this.$notify({
             title: '订单'+number,
             message: '已制作完成',
             type: 'success'
          })
          this.data(true)
        }
      })
    },
    meal(id,number) {
      this.axios.post('/order/status',{id,status:4}).then(({data}) => {
        if(!data.errcode) {
          this.$notify({
             title: '订单'+number,
             message: '顾客已取餐',
             type: 'success'
          })
          this.data(true)
        }
      })
    },
    onEnter() {
      this.isEnter = true
    },
    onLeave() {
      this.isEnter = false
    }
  },
}
</script>
<style lang="sass">
.current-list
  position: relative
  display: flex
  min-height: calc(100vh - 134px)
  .l,.r
    padding: 10px
    flex: 1
    h1
      font-weight: normal
      .box-card
        &+.box-card
          margin-top: 30px
        .clearfix:after
          content: ""
          clear: both
          display:block
        //   display: flex
        //   justify-content: space-between
        //   align-content: center
.current-list:after
  content: ""
  position: absolute
  top: 0
  bottom: 0
  left: 50%
  width: 6px
  margin-left: -3px
  background: #e6e6e6
</style>
